import React,{Component} from 'react';
import classnames from 'classnames';
import ReIcon from '../ReIcon';
import './MobileRightTopToolbar.less';

export default class MobileRightTopToolbar extends Component{

  render(){

    let {list=[],isShow=false}=this.props;
    let classname=classnames({
      'mobile-content-bar-content-top-wrapper':true,
      'hide-content-bar-top-content':!isShow,
    })
    let transitionValue=isShow?'opacity .1s .4s linear,width .1s .1s linear,height .2s .3s linear,visibility .1s .2s linear':
        'height .1s linear,visibility .1s .1s linear,opacity .1s .1s linear,width .1s .1s linear'
    let truList=list.filter(item=>item.showItem)

    return <div className={classname} style={{height:isShow?truList.length*35:0,transition:transitionValue}}>
      {
        truList&&truList.map((item,index)=>{
          return  <div className="item-wrapper" key={index} onClick={item.onClick}>
            <ReIcon className={'icon'} icon={item.icon}/>
            <span>{item.name}</span>
            <div className='line'></div>
          </div>
        })
      }
    </div>
  }
}
